<template>
    <div v-cloak class="aui-wrapper aui-page__iframe">
        <div class="aui-content__wrapper">
            <div class="aui-content">
                <el-card shadow="never" class="aui-card--fill">
                    <div class="mod-sys__role">
                        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                            <el-form-item>
                                <el-input size="small" v-model="dataForm.name" placeholder='名称' clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" @click="getDataList()">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small"  type="primary" @click="addOrUpdateHandle()">新增</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  size="small" type="danger" @click="deleteHandle()">删除</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                                v-loading="dataListLoading"
                                :data="dataList"
                                border
                                @selection-change="dataListSelectionChangeHandle"
                                @sort-change="dataListSortChangeHandle"
                                style="width: 100%;">
                            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                            <el-table-column prop="name" label='名称' header-align="center" align="center"></el-table-column>
                            <el-table-column prop="remark" label='备注' header-align="center" align="center"></el-table-column>
                            <el-table-column prop="createDate" label='创建时间' sortable="custom" header-align="center" align="center" width="180"></el-table-column>
                            <el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
                                <template #default="scope">
                                    <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                                    <el-button  type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :current-page="page"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="limit"
                                :total="total"
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="pageSizeChangeHandle"
                                @current-change="pageCurrentChangeHandle">
                        </el-pagination>
                        <!-- 弹窗, 新增 / 修改 -->
                        <RoleAddOrUpdateComponent v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList"></RoleAddOrUpdateComponent>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import RoleAddOrUpdateComponent from '@/components/sys/RoleAddOrUpdateComponent'
	import DataList from "@/utils/DataList";
	import {
		onMounted,
		toRefs
	} from "vue";
    export default {
        name: "Role",
		components: {
		     RoleAddOrUpdateComponent
		},
		setup() {
		    const {
		        dataForm,
		        mixinViewModuleOptions,
		        getDataList,
		        dataList,
		        total,
		        page,
		        limit,
		        dataListLoading,
		        dataListSelectionChangeHandle,
		        dataListSortChangeHandle,
		        pageSizeChangeHandle,
		        pageCurrentChangeHandle,
		        addOrUpdateHandle,
		        deleteHandle,
		        exportHandle,
		        addOrUpdateVisible,
		        dataListSelections,
		        addOrUpdate

		    } = DataList();

		    onMounted(() => {

		        mixinViewModuleOptions.value.getDataListURL = '/sys/role/page';
		        mixinViewModuleOptions.value.deleteURL = '/sys/role';
		        mixinViewModuleOptions.value.getDataListIsPage = true;
		        mixinViewModuleOptions.value.deleteIsBatch=true;
		        dataForm.value.name = '';

		        if (mixinViewModuleOptions.value.activatedIsNeed) {
		            getDataList();
		        }

		    })
		    return {
		        dataForm,
		        mixinViewModuleOptions,
		        getDataList,
		        dataList,
		        total,
		        page,
		        limit,
		        dataListLoading,
		        dataListSelectionChangeHandle,
		        dataListSortChangeHandle,
		        pageSizeChangeHandle,
		        pageCurrentChangeHandle,
		        addOrUpdateHandle,
		        deleteHandle,
		        exportHandle,
		        addOrUpdateVisible,
		        dataListSelections,
		        addOrUpdate
		    }
		},
		
	}




    //     data: function () {
    //         return {
    //             // 设置属性
    //             mixinViewModuleOptions: {
    //                 getDataListURL: '/sys/role/page',
    //                 getDataListIsPage: true,
    //                 deleteURL: '/sys/role',
    //                 deleteIsBatch: true,
    //                 activatedIsNeed: true,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
    //                 deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
    //                 exportURL: ''             // 导出接口，API地址
    //             },
    //             // 默认属性
    //             dataForm: {name: ''},               // 查询条件
    //             dataList: [],               // 数据列表
    //             order: '',                  // 排序，asc／desc
    //             orderField: '',             // 排序，字段
    //             page: 1,                    // 当前页码
    //             limit: 10,                  // 每页数
    //             total: 0,                   // 总条数
    //             dataListLoading: false,     // 数据列表，loading状态
    //             dataListSelections: [],     // 数据列表，多选项
    //             addOrUpdateVisible: false   // 新增／更新，弹窗visible状态
    //         }},
       
    //             created: function () {
    //             if (this.mixinViewModuleOptions.activatedIsNeed) {
    //                 this.getDataList();
    //             }
    //         },
    //         methods: {
    //             // 获取数据列表
    //             getDataList: function () {
    //                 var self = this;
    //                 self.dataListLoading = true;
    //                 self.$http.get(
    //                     self.mixinViewModuleOptions.getDataListURL,
    //                     {
    //                         params: _.merge({
    //                             order: self.order,
    //                             orderField: self.orderField,
    //                             page: self.mixinViewModuleOptions.getDataListIsPage ? self.page : null,
    //                             limit: self.mixinViewModuleOptions.getDataListIsPage ? self.limit : null
    //                         }, self.dataForm)
    //                     }
    //                 ).then(function (res) {
    //                     self.dataListLoading = false;
    //                     if (res.data.code !== 0) {
    //                         self.dataList = [];
    //                         self.total = 0;
    //                         return self.$message.error(res.data.msg);
    //                     }
    //                     self.dataList = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.list : res.data.data;
    //                     if(res.data.data.param){
    //                         self.dataForm = res.data.data.param;
    //                     }
    //                     self.total = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.total : 0;
    //                 }).catch(function () {
    //                     self.dataListLoading = false;
    //                 })
    //             },
    //             // 多选
    //             dataListSelectionChangeHandle: function (val) {
    //                 this.dataListSelections = val;
    //             },
    //             // 排序
    //             dataListSortChangeHandle: function (data) {
    //                 if (!data.order || !data.prop) {
    //                     this.order = '';
    //                     this.orderField = '';
    //                     return false;
    //                 }
    //                 this.order = data.order.replace(/ending$/, '');
    //                 this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase();
    //                 this.getDataList();
    //             },
    //             // 分页, 每页条数
    //             pageSizeChangeHandle: function (val) {
    //                 this.page = 1;
    //                 this.limit = val;
    //                 this.getDataList();
    //             },
    //             // 分页, 当前页
    //             pageCurrentChangeHandle: function (val) {
    //                 this.page = val;
    //                 this.getDataList();
    //             },
    //             // 新增 / 修改
    //             addOrUpdateHandle: function (id) {
    //                 let self = this;
    //                 self.addOrUpdateVisible = true;
    //                 self.$nextTick(function () {
    //                     self.$refs.addOrUpdate.dataForm.id = id;
    //                     self.$refs.addOrUpdate.init();
    //                 })
    //             },
    //             // 删除
    //             deleteHandle: function (id) {
    //                 var self = this;
    //                 if (self.mixinViewModuleOptions.deleteIsBatch && !id && self.dataListSelections.length <= 0) {
    //                     return self.$message({
    //                         message: self.$t('prompt.deleteBatch'),
    //                         type: 'warning',
    //                         duration: 1000
    //                     });
    //                 }
    //                 self.$confirm(self.$t('prompt.info', { 'handle': self.$t('delete') }), self.$t('prompt.title'), {
    //                     confirmButtonText: self.$t('confirm'),
    //                     cancelButtonText: self.$t('cancel'),
    //                     type: 'warning'
    //                 }).then(function () {
    //                     self.$http.delete(
    //                         self.mixinViewModuleOptions.deleteURL + (self.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id),
    //                         self.mixinViewModuleOptions.deleteIsBatch ? {
    //                             'data': id ? [id] : self.dataListSelections.map(function (item) { return item[self.mixinViewModuleOptions.deleteIsBatchKey]; })
    //                         } : {}
    //                     ).then(function (res) {
    //                         if (res.data.code !== 0) {
    //                             return self.$message.error(res.data.msg);
    //                         }
    //                         self.$message({
    //                             message: self.$t('prompt.success'),
    //                             type: 'success',
    //                             duration: 500,
    //                             onClose: function () {
    //                                 self.getDataList();
    //                             }
    //                         });
    //                     }).catch(function () {});
    //                 }).catch(function () {});
    //             },
    //             // 导出
    //             exportHandle: function () {
    //                 window.location.href = window.SITE_CONFIG['apiURL'] + this.mixinViewModuleOptions.exportURL + '?' + Qs.stringify(this.dataForm);
    //             }
    //         }

    //     }


</script>

<style scoped>

</style>
